
<template>
  <div>

    <!--全屏按钮-->
    <div style="position: absolute; right: 0; bottom: 0;margin: 20px">
      <el-icon @click="handleFullScreen"><FullScreen /></el-icon>
    </div>
    <div style="display: flex">
      <el-card style="width: 50%; margin: 10px">
        <template #header>
          <div class="card-header">
            <span style="align-content: center">今日数据</span>
          </div>
        </template>
        <!--今日是数据-->
        <div id="today" style="height: 200px"/>
      </el-card>
      <el-card style="width: 50%; margin: 10px">
        <template #header>
          <div class="card-header">
            <span>总数据</span>
          </div>
        </template>
        <!--总数据-->
        <div id="total" style="height: 200px"/>
      </el-card>
    </div>
    <!--7日统计-->
    <div id="charts" style="width: 100%; height: 400px; margin: 10px">
    </div>

  </div>
</template>

<style scoped>

</style>

<script>
import * as echarts from "echarts";
import {defineComponent, getCurrentInstance, onMounted, ref} from "vue";
import {ArrowDown} from "@element-plus/icons-vue";
export default defineComponent({
  setup() {
    // 使用 ref 创建响应式数据
    const chartData1 = ref([]);
    const chartData2 = ref([]);
    const chartData3 = ref([]);

    const {appContext: {config: {globalProperties: global}}} = getCurrentInstance();//3.0.11
    // 修改 updateData 方法以返回 Promise
    async function updateData() {
      try {
        // 假设 this.$request.get 返回一个 Promise
        const res1 = await global.$request.get("/task/countTodayTasks");
        const res2 = await global.$request.get("/user/countUsersByLoginTime");
        chartData1.value.push(res1.data, res2.data); // 使用 ref 的 value 属性更新数据
        const res3 = await global.$request.get("/task/countAllTask");
        const res4 = await global.$request.get("/user/countUsers");
        chartData2.value.push(res3.data, res4.data);
        const res5 = await global.$request.get("/task/getWeekData");
        chartData3.value = res5.data;
      } catch (error) {
        // 错误处理
        console.error("Error fetching data:", error);
      }
      // 注意：这里不需要返回 data，因为我们已经直接更新了 ref 的值
    }
    onMounted(async () => {
      // 等待数据加载完成
      await updateData();
      console.log(chartData2)
      var chartDom = document.getElementById('charts');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title:{
          text: '本周新增任务'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: chartData3.value,
            type: 'line'
          }
        ],
        // 图标距离容器距离
        grid: {
          top: '50px',
          left: '50px',
          right: '50px',
          bottom: '50px',
        }
      };
      option && myChart.setOption(option);


      var chartDom = document.getElementById('today');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: 'category',
          data: ['今日任务总数', '今日活跃用户']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: chartData1.value,
            type: 'bar'
          }
        ]
      };
      option && myChart.setOption(option);


      var chartDom = document.getElementById('total');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: 'category',
          data: ['总任务次数', '总用户']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: chartData2.value,
            type: 'bar'
          }
        ]
      };
      option && myChart.setOption(option);
      });
    },

    components: {ArrowDown},
    computed: {},
    methods: {
      handleFullScreen() {
        document.documentElement.requestFullscreen()
      }
    },

  })

</script>